<template>
	<div id="background">
		<!-- <div class="title">TISSYS网球赛事服务系统</div> -->
		<div class="main" v-if="show">
			<div class="group_name">
				<span>{{liveInfo.group_name}}</span>
				<span>-</span>
				<span>{{liveInfo.ground_name}}</span>
				- <span>{{liveInfo.site|teams}}#</span>
			</div>
			<div class="flex">
				<!-- 				<div class="area" v-if="liveInfo.com_type!=3 && liveInfo.com_type!=2 && liveInfo.com_type!=5">第{{liveInfo.stage}}阶段<br>第{{liveInfo.wheel}}轮</div>
				<div class="area" v-if="liveInfo.com_type == 5">{{liveInfo.second_order+1}}区<br>第{{liveInfo.wheel}}轮</div> -->
				<div class="area" v-if="liveInfo.com_system == 1 || liveInfo.com_system == 4"><span>第{{liveInfo.stage}}阶段 {{liveInfo|wheelName}}</span></div>
				<div class="area" v-if="liveInfo.com_system == 5"><span>{{liveInfo.second_order+1}}区 第{{liveInfo.wheel}}轮</span></div>
				<div class="area" v-if="liveInfo.com_system == 3 || liveInfo.com_system == 2"><span>{{liveInfo|wheelName}}</span></div>
				<div class="match_name">
					<div class="name_a">
						<div class="name">{{name_a}}<i class="serve" v-if="liveInfo.clash_info.user_id_a ? liveInfo.clash_info.user_id_a.indexOf(liveInfo.serve_user) >= 0 && liveInfo.status==2 : false"></i></div>
						<div class="score">
							<div v-for="(item, index) in liveInfo.round_num" class="round_num">
								<div class="point" :class="{'point_fz': item.top > 9 || item.bot > 9}" v-if="item.top !== ''">{{item.top}}<i
									 v-if="item.tiebreak && item.top < item.bot">{{item.tiebreak}}</i></div>
							</div>
							<div class="score_num" :class="{'score_num_let':liveInfo.score_num.split(':')[0].length==2}">{{liveInfo.score_num ? liveInfo.score_num.split(':')[0] : ''}}</div>
						</div>
					</div>
					<div class="name_b">
						<div class="name">{{name_b}}<i class="serve" v-if="liveInfo.clash_info.user_id_b ? liveInfo.clash_info.user_id_b.indexOf(liveInfo.serve_user) >= 0 && liveInfo.status==2 : false"></i></div>
						<div class="score">
							<div v-for="(item, index) in liveInfo.round_num" class="round_num">
								<div class="point" :class="{'point_fz': item.bot > 9 || item.top>9}" v-if="item.bot !== ''">{{item.bot}}<i v-if="item.tiebreak && item.bot < item.top">{{item.tiebreak}}</i></div>
							</div>
							<div class="score_num" :class="{'score_num_let':liveInfo.score_num.split(':')[1].length==2}">{{liveInfo.score_num ? liveInfo.score_num.split(':')[1] : ''}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="matchTime" v-if="liveInfo.game_time != null"><span>比赛时间：</span>{{liveInfo.game_time}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				liveInfo: {},
				name_a: '',
				name_b: '',
				show: null
			}
		},
		created() {
			this.led_info()
		},
		filters: {
			teams(site) {
				return site.split(',')[0]
			},
			wheelName: (battle) => {
				if ((battle.com_system == 1 && battle.stage == 2) || battle.com_system == 3) {
					let maxWheel = battle.wheel_number
					let wheel = battle.wheel
					let wheelName = ''
					if (wheel == maxWheel) wheelName = '决赛'
					if (wheel == (parseInt(maxWheel) - 1)) wheelName = '半决赛'
					if (wheel == (parseInt(maxWheel) - 2)) wheelName = '1/4决赛'
					if (wheel < (parseInt(maxWheel) - 2)) wheelName = `第${battle.wheel}轮`
					return wheelName

				} else {
					return `第${battle.wheel}轮`
				}
			},
		},
		methods: {
			led_info() {
				this.$axios.post('/LedShow/led_info', {
					com_id: this.$route.query.com_id
				}, {
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				}).then(res => {
					setTimeout(() => {
						if (res.data.code == 2000) {
							this.show = true
							this.liveInfo = res.data.data
							this.name_a = res.data.data.clash_info.name_a
							this.name_b = res.data.data.clash_info.name_b
						} else {
							this.show = false
						}
						this.led_info()
					}, 3000)
				}).catch(res => {
					console.log(res)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	#background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000;
		color: #62BDF2;

		.title {
			color: #AAAAAA;
			font-size: 28px;
			margin: 24px 0 29px 0;
			padding-bottom: 24px;
			padding-left: 58px;
			border-bottom: 1px #571e1c solid;
		}

		.main {
			margin: 32px;
			border: 5px #B43E3A solid;
		}

		.group_name {
			font-size: 80px;
			font-weight: 600;
			margin-top: 10px;
			margin-left: 216px;
			// margin-top: 10%;
			// margin-left: 23%;
			margin-bottom: 20px;
		}

		.flex {
			display: flex;

			.match_name {
				position: relative;
				border-left: 5px #B43E3A solid;
				width: 90%;

				&:after {
					content: '';
					position: absolute;
					width: 100%;
					top: 50%;
					border-bottom: 3px dotted #b43e3a;
				}

				.name_a,
				.name_b {
					font-size: 100px;
					font-weight: 700;
					display: flex;
					justify-content: space-between;

					.name {
						display: flex;
						align-items: center;
						padding: 50px 33px;

						.serve {
							display: inline-block;
							width: 60px;
							height: 60px;
							border-radius: 50%;
							background: #8BC34A;
							font-size: 65px;
							margin-left: 20px;
						}
					}

					.score {
						display: flex;
						// width: 50%;
						width: auto;

						.round_num {
							height: 100%;
							font-size: 300px;
							font-weight: bold;
						}

						.point {
							position: relative;
							// width: 125px;
							width: 200px;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-left: 3px dotted #b43e3a;

							// border-bottom: none;
							i {
								position: absolute;
								// top: 10px;
								// right: 20px;
								// font-size: 70px;
								top: -16px;
								right: 5px;
								font-size: 98px;
							}
						}

						.point_fz {
							width: 400px;
						}

						.score_num {
							display: flex;
							align-items: center;
							justify-content: center;
							// width: 125px;
							// width: 200px;
							width: 320px;
							border: 3px dotted #b43e3a;
							height: 100%;
							font-size: 300px;
							font-weight: bold;
						}

						.score_num_let {
							width: 320px;
							letter-spacing: -10px;
							justify-content: start;
						}

						.score_num_fz {
							width: 300px;
							// font-size: 250px;

						}
					}
				}

				.name_a .score {
					.round_num {
						.point {
							border-top: 3px dotted #b43e3a;
						}
					}

					.score_num {
						border-bottom: none;
					}
				}

				.name_b .score {
					.round_num {
						.point {
							border-bottom: 3px dotted #b43e3a;
						}
					}

					.score_num {
						border-top: none;
					}
				}
			}
		}

		.area {
			font-size: 72px;
			margin-left: 42px;
			// margin-left: 14.1%;
			margin-right: 29px;
			width: 75px;
			display: flex;
			align-items: center;
			text-align: center;
		}

		.round {
			font-size: 72px;
			width: 75px;
			display: flex;
			align-items: center;
			text-align: center;
			margin-right: 29px;
		}

		.matchTime {
			// margin-left: 216px;
			margin-left: 216px;
			margin-top: 42px;
			margin-bottom: 20px;
			// margin-bottom: 10%;
			font-size: 72px;
		}
	}
</style>
